<template>
    <div v-infinite-scroll="msiteGetshopRestaurantsList" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
        <router-link tag="div" v-for="item in msiteDetail.shopListArr" :key="item.id" :to="{path:'/shop',query:{geoHash,id:item.id}}">
            <a href="javascript:void(0);" class="ps-media-box ps-media-box_appmsg" >
                <div class="ps-media-box__hd">
                    <pic :url="item.image_path | getImgPath" class="ps-media-box__thumb"></pic>
                </div>
                <pr-row class="ps-media-box__bd" align="end">
                    <pr-col>
                        <h4 class="ps-media-box__title">{{item.name}}</h4>
                        <p class="ps-media-box__desc" v-for="item in item.supports" :key="item.id">{{item.icon_name}}</p>
                        <div class="clear">
                            <div class="pull-left"><rating-star :rating="item.rating"></rating-star>{{item.rating}}</div>
                            <div class="pull-left">月售{{item.recent_order_num}}单</div>
                        </div>
                        <p class="ps-media-box__desc" v-if="item.delivery_mode">{{item.delivery_mode.text}}准时打</p>
                        <p class="ps-media-box__desc">¥{{item.float_minimum_order_amount}}起送 {{item.piecewise_agent_fee.tips}}</p>
                    </pr-col>
                    <pr-col hor="right">
                        <p class="ps-media-box__desc">{{item.distance > 1000? (item.distance/1000).toFixed(2) + 'km': item.distance + 'm'}}/<span class="ps-lead--time">{{item.order_lead_time}}分钟</span></p>
                    </pr-col>
                </pr-row>
            </a>
        </router-link>
    </div>
</template>
<style lang="less" scoped>
    @import "./../../../assets/css/main.less";
    @import "./../../../assets/css/variable_gather";
    .ps-nav-classify{
        margin: 44px auto 0;
        height: 3rem;
        .onePxBottomByBg(@dark-border,1px);
    }
    .ps-nav-food--img{
        width: 0.84rem;
        height: 0.84rem;
    }
    .ps-nav-contain{
        .txt-center();
    }
    .ps-lead--time{
        color: @bluer;
    }
    .ps-order-num{
        .font-dpr(12px);
    }
</style>
<script>
    import {mapState, mapGetters, mapActions} from 'vuex'
    export default{
        props:{
            geoHash:{
                type: String,
                default: ''
            }
        },
        data(){
            return{

            }
        },
        computed:{
            ...mapGetters({
                'msiteDetail': 'msiteDetailState'
            })

        },
        methods:{
            ...mapActions({
                'msiteGetshopRestaurantsList' : 'msiteGetshopRestaurantsList'
            })
        },
        created(){
        },
        mounted(){

        }
    }
</script>
